<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="wrap">
		<div id="main">
			<div id="title">
				<h1>探花交友</h1>
			</div>
			<!-- 账号登录界面 -->
			<div id="login">
				<form id="form1" action="http://127.0.0.1:18086/usernamelogin" method="post">
					<div class="in">
						<input type="text" name="username" id="" value="" placeholder="账号" />
					</div>
					<div class="in">
						<input type="password" name="password" id="" value="" placeholder="密码" />
					</div>
					<div>
						<input type="submit" value="登录" id="usernamelogin"/>
					</div>
					<div></div>
					<div>
						<button type="button" onclick="weixinlogin()">微信登录</button>
					</div>
				</form>
			</div>
			
			<!-- 微信登录界面 -->
			<div id="weixin-login">
				<div id="weixin"></div>
				<div>
					<button type="button" onclick="login()">账号登录</button>
				</div>
			</div>
		</div>
		
		<footer class="main-footer"></footer>
	</div>
</body>

<script type="text/javascript" src='js/main.js'></script>
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
	function weixinlogin() {
		document.getElementById('login').style.display = 'none';
		document.getElementById('weixin-login').style.display = 'block';
	}
	
	function login() {
		document.getElementById('weixin-login').style.display = 'none';
		document.getElementById('login').style.display = 'block';
	}
</script>

<script type="text/javascript">
	 var obj = new WxLogin({
	 self_redirect:false,
	 id:"weixin", 
	 appid: "wx3bdb1192c22883f3", 
	 scope: "snsapi_login", 
	 redirect_uri: "http://note.java.itcast.cn/weixinlogin",
	 });
	 
</script>

<script>
    $(function () {
        $("#usernamelogin").click(
            function () {
                //发送ajax请求的代码
				//使用$.ajax()发送异步请求
				$.ajax({
				    url:"http://127.0.0.1:18086/usernamelogin" , //请求路径
				    type:"POST", //请求方式
				    data:{"username":"admin","password":123456},//请求参数
				    dataType:"text",//设置接受到的响应数据的格式
				    //回调函数
				    success:function (data) {
				        console.log(data);
				    },
				    error:function () {
				        console.log("出错啦...")
				    }//表示如果请求响应出现错误，会执行的这个回调函数
				
				})
            }
        );
    });
</script>

</html>